<template>
  <div>
    <div class="containerDiv" @click='showImg' id="container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
const props = defineProps({
  imgList: {
    type: Array
  },
  imgWidth: {
    type: String,
    default: 300
  }
})
// console.log(props.imgList.length);

const showImg = (e) => {
  // console.log(e.target.src);
  // return
  showImagePreview([e.target.src]);
  showImagePreview({
    images: [
      e.target.src
    ],
    closeable: true,
  });
}
//渲染列表
const list = ref([]);
const chunkSize = 15; // 设置个切开为一个小数组
const chunkedArray = reactive([]);
const index = ref(0);
for (let i = 0; i < props.imgList.length; i += chunkSize) {
  chunkedArray.push(props.imgList.slice(i, i + chunkSize));
}
// console.log(chunkedArray);
list.value.push(...chunkedArray[index.value]);
index.value++
// console.log(list.value, index.value);
onMounted(() => {
  let divContainer = document.getElementById('container');
  // let imgWidth = props.imgWidth < 200 ? 200 : props.imgWidth;
  let imgWidth = props.imgWidth;
  // console.log(props.imgList);
  //动态生成图片元素
  function createImgs() {
    for (let i = 1; i < list.value.length; i++) {
      // let src = `http://127.0.0.1:5500/img/${i}.jpg`;
      let src = list.value[i]
      // console.log(list.value[i]);
      let img = document.createElement('img');
      img.style.width = imgWidth + 'px';
      img.style.borderRadius = '10px';
      img.onload = setPositions;
      img.src = src;
      divContainer.appendChild(img);
    }
  }
  createImgs();


  function cal() {
    let containerWidth = divContainer.clientWidth;
    let columns = Math.floor(containerWidth / imgWidth);
    let spaceNumber = columns + 1;
    let leftSpace = containerWidth - columns * imgWidth;
    let space = leftSpace / spaceNumber;
    return {
      space,
      columns
    }

  }
  function setPositions() {
    let info = cal();
    let nextTop = new Array(info.columns);
    nextTop.fill(0);
    for (let i = 0; i < divContainer.children.length; i++) {
      let img = divContainer.children[i];
      let minTop = Math.min.apply(null, nextTop);

      img.style.top = minTop + 'px';
      let index = nextTop.indexOf(minTop);
      nextTop[index] += img.height + info.space;
      if (info.columns == 1) {
        //如果是一列就默认展示全屏
        img.style.left = '0px';
        img.style.width = '100%';
      }
      else {
        //这里要设置回去 不然变化的时候就弹不回了
        img.style.width = imgWidth + 'px';
        let left = (index + 1) * info.space + index * imgWidth;
        img.style.left = left + 'px';
      }
    }
    let max = Math.max.apply(null, nextTop);
    divContainer.style.height = max + 'px';
  }
  window.onload = setPositions;

  let timerId = null;
  window.onresize = function () {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(setPositions, 100)
  }
  window.onscroll = (e) => {
    let scrollTop = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    let bodyHeight = window.innerHeight;
    // if(bodyHeight-scrollTop)

    // console.log(Math.ceil(scrollHeight - scrollTop), bodyHeight);
    // console.log(Math.ceil(scrollHeight - scrollTop), bodyHeight);
    console.log(Math.ceil(scrollHeight - scrollTop) - bodyHeight);
    // if (Math.ceil(scrollHeight - scrollTop) == bodyHeight | Math.ceil(scrollHeight - scrollTop) == bodyHeight + 1 | Math.ceil(scrollHeight - scrollTop) == bodyHeight - 1) {

    if (Math.ceil(scrollHeight - scrollTop) - bodyHeight < 1200) {

      if (timerId) {
        clearTimeout(timerId);
      }
      timerId = setTimeout(() => {
        list.value = chunkedArray[index.value];
        index.value++;
        createImgs();
      }, 100)

      // list.value.push(...chunkedArray[index.value]);

      // console.log(list.value.length, index.value);
      // newCreateImgs(chunkedArray[index.value]);



      // water.reRender();


    }
  }
  function initNoScrollbar() {
    const scrollbarExists = hasScrollbar();
    console.log(scrollbarExists);
    if (!scrollbarExists) {
      list.value = chunkedArray[index.value];
      index.value++;
      createImgs();

    }

  }
  initNoScrollbar()
  function hasScrollbar() {
    // 获取文档的完整高度
    const bodyHeight = document.body.scrollHeight;
    const windowHeight = window.innerHeight;
    // 如果文档高度大于窗口高度，则表示有滚动条
    return bodyHeight > windowHeight;
  }

  // 检查是否有滚动条


})
</script>

<style>
.containerDiv {
  margin: 0 auto;
  width: 99%;
  position: relative;
}

.containerDiv img {
  position: absolute;
  transition: 0.5s;


}
</style>
 